<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时语音聊天室</title>
    <script src="./ZLMRTCClient.js"></script>
</head>
<body>
<p>
    <label for="streamUrl">url:</label>
    <input type="text" id='streamUrl' value="">
</p>
<!--
<button id="startAudio">开启语音</button>
<button id="stopAudio" disabled>关闭语音</button>-->

<button onclick="start()">开启语音</button>
<button onclick="stop()">关闭语音</button>

<div id="remoteAudioContainer"></div>

<script>

    var player = null
    var ishttps = 'https:' == document.location.protocol ? true : false
    var url = document.location.protocol+"//"+window.location.host+"/index/api/webrtc?app=live&stream=test&type=push"
    if(!ishttps && !isLocal){
        alert('需要在https的网站访问')
    }
    document.getElementById('streamUrl').value = url
    function start_play(){
        player = new ZLMRTCClient.Endpoint(
            {
                // element: '',// video 标签
                debug: true,// 是否打印日志
                zlmsdpUrl:document.getElementById('streamUrl').value,//流地址
                simulcast:false,
                useCamera:false,
                audioEnable:true,
                videoEnable:false,
                recvOnly:false,
                // resolution:'',
                usedatachannel: false,
            }
        );

        player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,function(e)
        {// ICE 协商出错
            console.log('ICE 协商出错')
        });

        player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,function(e)
        {//获取到了远端流，可以播放
            console.log('播放成功',e.streams)
        });

        player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,function(e)
        {// offer anwser 交换失败
            console.log('offer anwser 交换失败',e)
            stop();
        });

        player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s)
        {// 获取到了本地流

            document.getElementById('selfVideo').srcObject=s;
            document.getElementById('selfVideo').muted = true;

            //console.log('offer anwser 交换失败',e)
        });

        player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,function(s)
        {// 获取本地流失败

            console.log('获取本地流失败')
        });

        player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,function(state)
        {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
            console.log('当前状态==>',state)
        });

        player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,function(event)
        {
            console.log('rtc datachannel 打开 :',event)
        });

        player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,function(event)
        {
            console.log('rtc datachannel 消息 :',event.data)
        });
        player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,function(event)
        {
            console.log('rtc datachannel 错误 :',event)
        });
        player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,function(event)
        {
            console.log('rtc datachannel 关闭 :',event)
        });
    }


    function start()
    {
        stop();
        start_play()
    }

    function stop()
    {
        if(player)
        {
            player.close();
            player = null;
        }
    }


</script>
</body>
</html>
